<template>
  <div>
    <!-- 生成图表 -->
    <div id="main"></div>
    <div class="main1"></div>
  </div>
</template>
<script>
// 引入原生echarts
// var echarts = require("echarts");
import echarts from "echarts";
export default {
  data() {
    return {};
  },
  //     created() {
  //     console.log(this.$options.series[0].data)=[15, 240, 356, 100, 140, 250];
  //   },
  mounted() {
    //   初始化一个echarts
    var myChart = echarts.init(document.getElementById("main"));
    var myChart1 = echarts.init(document.getElementsByClassName("main1")[0]);

    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
    myChart1.setOption({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        left: 10,
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "30",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 5, name: "衬衫" },
            { value: 20, name: "羊毛衫" },
            { value: 36, name: "雪纺衫" },
            { value: 10, name: "裤子" },
            { value: 10, name: "高跟鞋" },
            { value: 20, name: "袜子" },
          ],
        },
      ],
    });
  },
};
</script>
<style lang="">
#main {
  width: 400px;
  height: 400px;
}
.main1 {
  width: 400px;
  height: 400px;
}
</style>